<template>
	<view class="container recharge">
		<view class="recharge_box uni-radius">
			<view class="box_input">
				<view class="tit">输入金额(元)</view>
				<view class="money">
						<text>￥</text>
						<u-number-box v-model="money" @change="valChange" :step="100" :min="100" integer inputWidth="200" buttonSize="80" bgColor="#fff" iconStyle="color: #f06c7a"></u-number-box>
					<!-- <input type="number" class="uni-input" v-model="money"  placeholder-style="color:#fff"  focus placeholder="0" /> -->
					
				</view>
				
			</view>
		</view>
		<view class="pay-type-list uni-radius">
			<!-- <view class="type-item" @click="changePayType(1)">
				<uni-icons class="uni-ml-3 uni-mr-3" customPrefix="iconfont" type="icon-weixinzhifupay" size="20" color="#22ac38"></uni-icons>
				<view class="con">
					<text class="tit">微信支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#22ac38" :checked='payType == 1' ></radio>
				</label>
			</view> -->
			<view class="type-item bg" @click="changePayType(2)">
				<!-- <uni-icons class="uni-ml-3 uni-mr-3" customPrefix="iconfont" type="icon-weixinzhifupay" size="20" color="#1677ff"></uni-icons> -->
				<view class="left">
					<image src="/static/img/alipay.png"></image>
				</view>
				<view class="con">
					<text class="tit">支付宝</text>
				</view>
				<label class="radio">
					<radio value="" color="#f06c7a" :checked='payType == 2' ></radio>
				</label>
			</view>
			<!-- <view class="type-item" @click="changePayType(3)">
				<text class="icon iconfont icon-bankCard"></text>
				<view class="con">
					<text class="tit">银行卡支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#3dcdbf" :checked='payType == 3' ></radio>
				</label>
			</view> -->
		</view>
		<!-- <view class="regbox">
			<view class="reg-content">
				<view class="input-item">
					<text class="tit color-fz">交易密码</text>
					<input 
						type="text" 
						v-model="alipay" 
						placeholder="请输入支付宝账号"
						maxlength="35"
						placeholder-style="color:#a0a2b4"
					/>
				</view>
				
				<view class="input-item">
					<text class="tit color-fz">确认密码</text>
					<input 
						type="password" 
						v-model="password1" 
						placeholder="请输入支付密码"
						maxlength="20"
						placeholder-style="color:#a0a2b4"
					/>
				</view>
			</view>
		</view> -->
		
		<view class="content1">
			<view class="row">
				<view class="nominal">
					姓名
				</view>
				<view class="input">
					<input v-model="userinfo.user_name" disabled="true" placeholder="请输入姓名" type="text" maxlength="35"  />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					支付宝
				</view>
				<view class="input">
					<input  v-model="userinfo.alipay_account" disabled="true" placeholder="请输入支付宝账号" type="text" maxlength="35"  />
				</view>
			</view>
		</view>
		<view class="uni-mt-10">
			<button class="my-btn-lg btn" @click="gorecharge" :disabled="disable">确认提现</button>
		</view>
		<view class="content bg">
			<rich-text :nodes="rich"></rich-text>
		</view>
		<view class="content-class uni-radius bg" v-show="false">
			<!-- <view class="uni-h5">温馨提示</view> -->
			<view class="uni-pt-6 color-fz ">
				<view class="">
					<text>
						1.提现前请先完成实名认证。
						2.为保障资金安全，提现支付宝姓名需与实名认证姓名一致。
						3.提现金额50元起提，提现额度必须是整数（例：50.60.70..）
						4.提现手续费1%。
						5.提现到账时间T+2 节假日顺延
						6.单日提现次数不得超过2次，单次提现额度最高9999。
						<!-- 2.账户钱包里至少有1元余额才可以实名 -->
					</text>
				</view>
				
			</view>
		</view>
		<u-modal :show="show" :title="title" @confirm='confirm' :showCancelButton='true' @cancel="cancel">
			
			<view class="money1" style="width: 100%;color: black;text-align: center;padding: 10px 0;">
				￥<text style="font-size: 30px;font-weight: 600;">{{(money*1).toFixed(2)}}</text>
				<!-- <view class="flex-between uni-mt-10" style="border-top:1px solid #888;width: 100%;color: black;padding: 5px 0;">
					<view class="">
						手续费
					</view>
					<view class="">
						{{(money*0.01).toFixed(2)}}
					</view>
				</view>
				<view class="flex-between">
					<view class="">
						费率
					</view>
					<view class="">
						4%
					</view>
				</view> -->
			</view>
			
		</u-modal>
		<!-- <my-login :loginshow="!islogin" :req="true"></my-login>-->
		<!-- 登录弹窗 --> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payType: 2,
				money: 100,
				loadingType: 'more',
				disable: false,
				alipay:'',
				password1:'',
				islogin:false,//登录状态
				userinfo:{},
				show:false,
				title:"提现",
				rich:''
			}
		},
		async onLoad(){
			this.islogin = uni.getStorageSync('USERS_KEY')?true : false;
			var result = (await this.$ajax.get('advertisement/getggid.html?id=18'));
			console.log(result);
			if(result.data.code == 1){
				this.rich = result.data.data.content;
			}
		},
		onShow() {
			if(this.islogin) this.userinfo = uni.getStorageSync('USERS_KEY');
			if(this.islogin){
				this.userinfo = uni.getStorageSync('USERS_KEY');
			}
			
			this.alipay = this.userinfo.alipay;
			if(this.userinfo.alipay_account==''||this.userinfo.alipay_account==undefined||this.userinfo.alipay_account==null){
				uni.showModal({
					title:'提示',
					content:'未设置支付信息，去设置',
					showCancel:false,
					success() {
						this.$u.route('/pages/user/setting/edit')
					}
				})
			}
			// if(this.userinfo.password1 == ''){
			// 	uni.showModal({
			// 		title:'提醒',
			// 		content:'未设置交易密码，去设置',
			// 		success: (res) => {
			// 			if(res.confirm){
			// 				this.$navTo('/pages/user/pwd');
			// 			}
			// 		}
			// 	})
			// }
		},
		methods: {
			valChange(e){//步进器
				console.log('当前值为: ' + e.value)
				this.money = e.value
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			async confirm(){
				var data ={
					money:this.money,
					type2:this.payType
				}
				var result = (await this.$ajax.get('pay/withdrawal.html',{data:data}));
				
				console.log(result);
				this.$api.msg(result.data.msg);
				if(result.data.code == -1) {
					//this.$api.tips(result.data.msg);
					this.show = false;
					this.disable = false;
					return;
				}
				// if(result.data.code == -2) {
				// 	this.show = false;
				// 	uni.showModal({
				// 		title:'提醒',
				// 		content:'未设置支付密码，去设置',
				// 		success: (res) => {
				// 			if(res.confirm){
				// 				this.$navTo('/pages/user/pwd');
				// 			}
				// 		}
				// 	})
				// 	//this.$api.tips(result.data.msg);
				// 	return;
				// }
				this.show = false;
			},
			cancel(){
				this.show = false;
			},
			//确认支付
			// confirm: async function() {
			// 	uni.redirectTo({
			// 		url: '/pages/money/paySuccess'
			// 	})
			// },
			
			async gorecharge() {
				// this.disable = true;
				if(this.userinfo.alipay_account==''||this.userinfo.alipay_account==undefined||this.userinfo.alipay_account==null){
					uni.showModal({
						title:'提示',
						content:'未设置支付信息，去设置',
						showCancel:false,
						success() {
							this.$u.route('/pages/user/setting/edit')
						}
					})
				}
				if(this.money == 0) return this.$api.msg('金额未输入');
				if(this.money < 100) return this.$api.msg('提现金额100元起提');
				if(this.money%100 !=0) return this.$api.msg('提现金额为100的倍数');
				
				// if(this.money > 9999) return this.$api.msg('提现金额最大9999');
				// if(this.password1.length < 6) return this.$api.msg('密码未输入或长度不足6位');
				// if(this.userinfo.password1 == ''){
				// 	uni.showModal({
				// 		title:'提醒',
				// 		content:'未设置支付密码，去设置',
				// 		success: (res) => {
				// 			if(res.confirm){
				// 				this.$navTo('/pages/user/pwd');
				// 			}
				// 		}
				// 	});
				// 	// this.disable = false;
				// 	return;
				// }
				this.show=true;
				
				// console.log(result);
				
				// window.location.href = this.web + "/public/index.php/api/Weixinpay/goRecharge.html?order_id=" + result.data.data
			},
		}
	}
</script>

<style lang='scss' scoped>
	.recharge{
		/* height:100%; */
		overflow:hidden;
	}
	.slot-content{
		color: #333;
	}
	.recharge_box{
		margin:10rpx 0;
		height:auto;
		overflow:hidden;
		box-sizing: border-box;
		/* box-shadow:0 10rpx 20rpx rgba($color: #000000, $alpha:0.2); */
		text-align: left;
		position:relative;
		background: $uni-bg-color-main;
		.box_input{
			/* width:100%; */
			box-sizing: border-box;
			height:auto;
			overflow:hidden;
			padding:50rpx 80rpx;
			/* display:flex; */
			flex-wrap: wrap;
			justify-content:space-between;
			align-items: center;
			position: relative;
			z-index: 1;
		}
		.tit{
			font-size:34rpx;
			color:#fff;
			margin:0 0 40rpx 5rpx;
		}
		.money{
			display:flex;
			justify-content:flex-start;
			align-items:flex-end;
			text-align: left;
			text{
				/* width:20rpx; */
				font-size:60rpx;
				/* line-height:100rpx; */
				/* font-weight:bold; */
				color:#fff;
			}
			.uni-input{
				flex: 1;
				height:100rpx;
				line-height:100rpx;
				font-size:80rpx;
				color:#fff;
				font-weight: bold;
				border-bottom:1rpx rgba($color: #fff, $alpha: 0.5) solid;
				text-indent:55rpx;
			}
		}
	}
	.pay-type-list {
		background:#fff;
		margin:20rpx 0;
		/* box-shadow: 0 0 15rpx rgba($color: #000000, $alpha:0.05); */
		.type-item{
			/* height: 120upx; */
			padding: 30rpx 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			position:relative;
		}
		.left{
			width: 100upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			image{
				width: 80upx;
				height: 80upx;
			}
		}
		.icon{
			width: 60rpx;
			font-size:40rpx;
		}
		.icon-wxpay{
			color:#09bb07;
		}
		.icon-alipay{
			color:#00a0e9;
		}
		.icon-bankCard{
			color:#02b89c;
		}
		.tit{
			font-size:30rpx;
			color:#333;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: #999;
		}
	}
	.recharge_btn{
		display: flex;
		justify-content:space-between;
		align-items: center;
		margin:80rpx 40rpx;
		button{
			width:100%;
			color:#fff;
			height:86rpx;
			line-height:86rpx;
			margin:0;
			border-radius:10rpx;
		}
		button:after{
			display: none;
		}
		.rbtn{
			background:-webkit-linear-gradient(left,#02b8b4,#1ed07c);
		}
	}
	
	.regbox{
		height:auto;
		overflow:hidden;
		/* padding:20rpx 40rpx; */
		position:relative;
		/* background:#fff; */
		z-index: 90;
		.reg_tit{
			text-align: center;
			font-size:50rpx;
			color:#fff;
			margin:20rpx 0 40rpx 0;
		}
		.title{
			padding: 150rpx 10rpx 50rpx 10rpx;
			background-image:-webkit-linear-gradient(right,#7c9cef,#948ce1,#aa84cd); 
			-webkit-background-clip:text; 
			-webkit-text-fill-color:transparent; 
		}
		.reg-content{
			/* margin:20rpx 0; */
		}
		.input-item{
			display:flex;
			align-items:center;
			justify-content:flex-start;
			height:100rpx;
			line-height:100rpx;
			/* border-bottom:1rpx #ddd solid; */
			padding: 0 10rpx;
			margin-top: $uni-spacing-col-base;
			position:relative;
			text-align: left;
			&:last-child{
				margin-bottom: 0;
			}
			.tit{
				width:140rpx;
				font-size: 30rpx;
				/* color:#333; */
				font-weight: bold;
			}
			input{
				flex:1;
				height:88rpx;
				padding: 0 50rpx;
				line-height:88rpx;
				background: $uni-bg-color;
				font-size: 30rpx;
				border-radius: 44rpx;
				color:#fff;
			}
			.sliders{
				width:100%;
			}
			.getSmsCode{
				width:180rpx;
				height:60rpx;
				line-height:60rpx;
				font-size:28rpx;
				border-radius:10rpx;
				text-align:center;
				position:absolute;
				/* background:$uni-bg-color-jianbian; */
				color: $uni-text-color;
				right:10rpx;
				z-index:10;
			}
			.vercodeimg{
				width:180rpx;
				height:60rpx;
				overflow:hidden;
				border-radius:10rpx;
				position:absolute;
				right:10rpx;
				z-index:10;
				image{
					width:100%;
					height:100%;
					display:block;
				}
			}
			&:last-child{border:0;}
		}
		
		.confirm-btn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			margin-top: 70upx;
			font-size:30rpx;
			&::after{
				display: none;
			}
		}
	}
</style>
